<template>
  <div :class="layoutCls">
    <t-head-menu :class="menuCls" :theme="theme" expand-type="popup" :value="active">
      <div class="menu-route">
        <l-breadcrumb />
      </div>

      <template v-if="layout !== 'side'" #default>
        <menu-content class="header-menu" :nav-data="menu" />
      </template>
      <template #operations>
        <div class="operations-container">
          <!-- 搜索框 -->
          <!-- <search :layout="layout" />
          <search v-if="layout !== 'side'" :layout="layout" /> -->

          <!-- 全局通知 -->
          <notice />
          <t-dropdown :min-column-width="135" trigger="hover">
            <template #dropdown>
              <t-dropdown-menu>
                <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/dashboard/index')">
                  <t-icon name="user-circle"></t-icon>个人中心
                </t-dropdown-item>
                <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
                  <t-icon name="poweroff"></t-icon>退出登录
                </t-dropdown-item>
              </t-dropdown-menu>
            </template>
            <div>
              <t-avatar
                v-if="userStore.userInfo.info && userStore.userInfo.info.coverUrl"
                size="40px"
                class="user-avatar hw-click-cursor"
                :image="$filters.getLinkUrl(userStore.userInfo.info.coverUrl)"
              >
              </t-avatar>
              <t-avatar
                image="//static.jiyi.show/assets/img/userImg.png"
                v-else
                size="40px"
                class="user-avatar hw-click-cursor"
              >
              </t-avatar>
            </div>
          </t-dropdown>
          <div class="blank-square" @click="pathLink(2)">
            <img src="//static.jiyi.show/assets/img/workIcon.png" alt="" />
            <span>模版广场</span>
          </div>
          <div class="blank-home" @click="pathLink(1)">
            <span>回首页</span>
          </div>
        </div>
      </template>
    </t-head-menu>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { doorUrl } from '@/utils/minxin';
import { urls } from '@/utils/request/upload';
import LBreadcrumb from './Breadcrumb.vue';
import { removeAuthorization } from '@/api/utils';
import { computed } from 'vue';
import type { PropType } from 'vue';
import { useRouter } from 'vue-router';
import { useSettingStore, useUserStore } from '@/store';
import { getActive } from '@/router';
import { prefix } from '@/config/global';
import LogoFull from '@/assets/assets-logo-full.svg?component';
import type { MenuRoute } from '@/types/interface';

const userStore = useUserStore();

import Notice from './Notice.vue';
import Search from './Search.vue';
import MenuContent from './MenuContent.vue';

const props = defineProps({
  theme: {
    type: String,
    default: '',
  },
  layout: {
    type: String,
    default: 'top',
  },
  showLogo: {
    type: Boolean,
    default: true,
  },
  menu: {
    type: Array as PropType<MenuRoute[]>,
    default: () => [],
  },
  isFixed: {
    type: Boolean,
    default: false,
  },
  isCompact: {
    type: Boolean,
    default: false,
  },
  maxLevel: {
    type: Number,
    default: 3,
  },
});

const router = useRouter();
const settingStore = useSettingStore();

const toggleSettingPanel = () => {
  settingStore.updateConfig({
    showSettingPanel: true,
  });
};

const active = computed(() => getActive());

const layoutCls = computed(() => [`${prefix}-header-layout`]);

const menuCls = computed(() => {
  const { isFixed, layout, isCompact } = props;
  return [
    {
      [`${prefix}-header-menu`]: !isFixed,
      [`${prefix}-header-menu-fixed`]: isFixed,
      [`${prefix}-header-menu-fixed-side`]: layout === 'side' && isFixed,
      [`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
    },
  ];
});

const changeCollapsed = () => {
  settingStore.updateConfig({
    isSidebarCompact: !settingStore.isSidebarCompact,
  });
};

const handleNav = (url) => {
  router.push(url);
};

const handleLogout = () => {
  let url = window.location.href;
  userStore.logout();
  removeAuthorization();
  window.location.href = doorUrl + 'login?redirect=' + url;
  // router.push({
  //   path: '/login',
  //   query: { redirect: encodeURIComponent(router.currentRoute.value.fullPath) },
  // });
};
const pathLink = (types: number) => {
  if (types === 1) {
    window.location.href = doorUrl + 'portal/home';
  } else {
    window.location.href = doorUrl + 'portal/square';
  }
};
const navToGitHub = () => {
  window.open('https://github.com/tencent/tdesign-vue-next-starter');
};

const navToHelper = () => {
  window.open('http://tdesign.tencent.com/starter/docs/get-started');
};
</script>
<style lang="less" scoped>
.@{starter-prefix}-header {
  &-menu-fixed {
    position: fixed;
    top: 0;
    z-index: 1001;

    &-side {
      left: 232px;
      right: 0;
      z-index: 10;
      width: auto;
      transition: all 0.3s;
      &-compact {
        left: 64px;
      }
    }
  }

  &-logo-container {
    cursor: pointer;
    display: inline-flex;
  }
}
.header-menu {
  flex: 1 1 1;
  display: inline-flex;

  :deep(.t-menu__item) {
    min-width: unset;
    padding: 20px 16px;
  }
}

.operations-container {
  display: flex;
  align-items: center;
  margin-right: 12px;

  .t-popup__reference {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .t-button {
    margin: 0 8px;
    &.header-user-btn {
      margin: 0;
    }
  }

  .t-icon {
    font-size: 24px;
    &.general {
      margin-right: 16px;
    }
  }
}

.header-operate-left {
  display: flex;
  margin-left: 20px;
  align-items: normal;
  line-height: 0;

  .collapsed-icon {
    font-size: 20px;
  }
}

.header-logo-container {
  width: 184px;
  height: 26px;
  display: flex;
  margin-left: 24px;
  color: var(--td-text-color-primary);

  .t-logo {
    width: 100%;
    height: 100%;
    &:hover {
      cursor: pointer;
    }
  }

  &:hover {
    cursor: pointer;
  }
}

.header-user-account {
  display: inline-flex;
  align-items: center;
  color: var(--td-text-color-primary);
  .t-icon {
    margin-left: 4px;
    font-size: 18px;
  }
}

:deep(.t-head-menu__inner) {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--td-border-level-1-color);
  height: 96px;
  padding: 0 var(--td-comp-paddingLR-xxl);
}

.t-menu--light {
  .header-user-account {
    color: var(--td-text-color-primary);
  }
}
.t-menu--dark {
  :deep(.t-head-menu__inner) {
    box-shadow: 0px 2px 4px 0px rgba(207, 189, 168, 0.15);
    border-bottom: none !important;
  }
  .header-user-account {
    color: rgba(255, 255, 255, 0.55);
  }
  .t-button {
    --ripple-color: var(--td-gray-color-10) !important;
    &:hover {
      background: var(--td-gray-color-12) !important;
    }
  }
}

.operations-dropdown-container-item {
  width: 100%;
  display: flex;
  align-items: center;

  .t-icon {
    margin-right: 8px;
  }

  :deep(.t-dropdown__item) {
    .t-dropdown__item__content {
      display: flex;
      justify-content: center;
    }
    .t-dropdown__item__content__text {
      display: flex;
      align-items: center;
      font-size: 16px;
    }
  }

  :deep(.t-dropdown__item) {
    width: 100%;
    margin-bottom: 0px;
  }
  &:last-child {
    :deep(.t-dropdown__item) {
      margin-bottom: 8px;
    }
  }
}
.user-avatar {
  // margin-left: 10px;
  margin: 0;
}
.menu-route {
  display: flex;
  align-items: center;
}
.blank-square {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #d2ad77;
  margin-left: 24px;
  img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
  span {
    font-size: 14px;
    font-family: MiSans-Regular, MiSans;
    font-weight: 400;
    color: #d2ad77;
    line-height: 22px;
  }
}
.blank-square:hover {
  background: #f5f1eb;
}
.blank-home {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 32px;
  background: linear-gradient(90deg, #e1c897 0%, #d2ad77 100%);
  margin-left: 12px;
  border-radius: 4px;
  span {
    font-size: 14px;
    font-family: MiSans-Medium, MiSans;
    font-weight: 500;
    color: #ffffff;
    line-height: 22px;
  }
}
.blank-home:hover {
  background: linear-gradient(90deg, #eed6a8 0%, #eac794 100%);
}
.operations-container {
  margin-right: 0;
}
:deep(.t-menu__operations) {
  margin-right: 0 !important;
}
</style>
